<template>
    <div class="p-add-class">
        <page-title>{{page_title}}</page-title>
        <div class="main"> 
            <div class="main-box">
                <div class="group">
                    <span class="name text-right">选择一级分类：</span>
                    <el-select v-model="form.one_level" placeholder="请选择一级分类" @change="oneLevelChange">
                        <el-option v-for="(item,id) in level_one_options" :key="id" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>

                <div class="group">
                    <span class="name text-right">选择二级分类：</span>
                    <el-select v-model="form.parent_id" placeholder="请先选择一级分类" :disabled="form.one_level == ''" @change="twoLevelChange">
                        <el-option
                        v-for="(item,id) in level_two_options"
                        :key="id"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="group flex">
                    <span class="name text-right">已有穴位：</span>
                    <el-input style="width:230px" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="textarea" placeholder="暂无数据" readonly></el-input>
                </div>

                <div class="group">
                    <span class="name text-right">穴位名称：</span>
                    <el-input v-model="form.title" placeholder="请输入穴位名称"></el-input>
                </div>

                <div class="group">
                    <span class="name text-right">穴位拼音：</span>
                    <el-input v-model="form.title_cn" placeholder="请输入穴位拼音"></el-input>
                </div>
                
                <!-- <div class="group clear-both">
                    <span class="name text-right float-left">上传图片：</span> 
                    <div class="float-left upload">
                        <update-img @clearImg="clearImg" @change="addImgEvent" :imgUrl="form.imgUrl"></update-img>
                    </div> 
                </div> -->
                <div class="group clear-both">
                    <span class="name text-right  float-left">穴位介绍：</span>
                    <div class="float-left ">
                        <editor-txt :content="form.content" @change="onEditorChange"></editor-txt>
                    </div>  
                </div>
                <div class="group">
                    <span class="name text-right">权限设置：</span>
                    <el-switch v-model="form.level_two" active-text="初级会员可看"></el-switch> 
                    <el-switch v-model="form.level_one" active-text="游客登录可看 "></el-switch> 
                </div>
                <div class="group text-center btn">
                     <el-button type="primary" @click="postData">确定</el-button>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
 import * as api from './../../../api/api'
export default {
    data() {
        return{
            page_title: '添加穴位',
            form:{
                one_level: '',//一级分类id
                parent_id: '',//二级分类id
                title:'',
                title_cn: '',
                content:'',
                level_two:false, //初级会员可看
                level_one:false, //游客登录可看
            },
            level_one_options:[],
            level_two_options:[],
            textarea: '',
        }
    },  
    created() {
        this.getOneLevel();
    },
    methods: {
        postData(){
            let vm = this;
            let body={
                model: "Points",
                data: {
                    parent_id: vm.form.parent_id,
                    title:vm.form.title,
                    title_cn:vm.form.title_cn,
                    publish_uid:sessionStorage.getItem('u_id'),
                    level_one:vm.form.level_one?1:0,
                    level_two:vm.form.level_two?1:0,
                    content: vm.form.content,
                    category:3
                },
            };
            if(vm.regInputData()){
                api.createData(body).then(res=>{
                    if(res.data.code === 200) {
                        this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        this.$router.push({name:'AcupointList'})
                    }
                });
            } 
        },
        //获取一级分类
        getOneLevel() {
            let body = {
                model: 'Points',
                limit: 10000,
                offset: 0,
                orderBy: "create_time desc",
                condition: {
                    parent_id: 0
                }
            };
            api.getDateList(body).then(res => {
                if(res.data.code === 200){
                    for (const item of res.data.data.data) {
                        let one = {};
                        one.value = item.id;
                        one.label = item.title;
                        this.level_one_options.push(one);
                    }
                }
                
            });
        },
        //获取二级分类
        oneLevelChange() {
            this.textarea = '';
            this.form.parent_id = '';
            this.level_two_options = [];
            let body = {
                model: 'Points',
                limit: 10000,
                offset: 0,
                orderBy: "create_time desc",
                condition: {
                    parent_id: this.form.one_level
                }
            };
            api.getDateList(body).then(res => {
                if(res.data.code === 200){
                    for (const item of res.data.data.data) {
                        let one = {};
                        one.value = item.id;
                        one.label = item.title;
                        this.level_two_options.push(one);
                    }
                }
            });
        },
        //获取已有穴位
        twoLevelChange() {
            this.textarea = '';
            let body = {
                model: 'Points',
                limit: 10000,
                offset: 0,
                orderBy: "create_time desc",
                condition: {
                    parent_id: this.form.parent_id,
                    category: 3
                }
            };
            api.getDateList(body).then(res => {
                if(res.data.code === 200){
                    for (const item of res.data.data.data) {
                        let one = item.title;
                        this.textarea = this.textarea + one + '，';
                    }
                }
            });
        },
        //regInputData
        regInputData(){
            if(this.form.one_level === '') {
                this.$message({showClose: true,message: '请选择一级分类'});
                return false;
            }else  if(this.form.parent_id === '') {
                this.$message({showClose: true,message: '请选择二级分类'});
                return false;
            }else if(this.form.title === '') {
                this.$message({showClose: true,message: '穴位名称不能为空'});
                return false;
            }else if(this.form.title_cn === '') {
                this.$message({showClose: true,message: '穴位拼音不能为空'});
                return false;
            }else if(this.form.content==''){
                this.$message({showClose: true,message: '请输入文章内容'});
                return false;
            }else  {
                return true;
            }
        },
        //删除上传的图片
        clearImg(){
            this.form.imgUrl='';
        },
        //上传图片
        // addImgEvent(val){ 
        //     this.form.imgUrl=val; 
        // },
        //富文本编辑器
        onEditorChange(e){ 
            this.form.content=e;
        },
    }, 
}
</script>

<style lang="scss" scoped>
.p-add-class {
    height:100%;  
    .main{
        padding: 10px 50px; 
        background:#fff;
        .main-box{
            width:80%;
            margin:auto; 
            .group{
                width:100%;
                margin:30px 0;
                &.flex{
                    display: flex;
                }
                .name{
                    display:inline-block;
                    width:110px;
                }
                .el-input{
                    width:222px; 
                }
            }
            .btn{
                padding-top:20px;
            }
        }
        .editor-box{
            width: 700px!important;
        }
    }  
}
</style>
